<template>
  <div>
    <!-- 条件查询 -->
    <div class="toolbar">
      <span>账号：</span>
      <el-input v-model="filter.account" class="search_ipt" clearable placeholder="请输入要查询的账号名称"></el-input>
      <span>姓名：</span>
      <el-input v-model="filter.name" class="search_ipt" clearable placeholder="请输入要查询的姓名"></el-input>
      <span>手机号：</span>
      <el-input v-model="filter.mobile" class="search_ipt" clearable placeholder="请输入要查询的手机号"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="queryLike()">查询</el-button>
      <el-button style="margin-left: 10px" type="info" @click="reset()">重置</el-button>
    </div>


    <!-- 工具条 -->
    <div style="height: 40px;line-height: 40px;margin-bottom: 10px">
      <el-button style="margin-left: 10px" type="primary" @click="saveOrUpdate()">新增</el-button>
      <el-dropdown split-button style="margin-left: 20px" type="primary" @command="batch">
        批量操作
        <el-dropdown-menu>
          <el-dropdown-item command="del">删除</el-dropdown-item>
          <el-dropdown-item command="disable">禁用</el-dropdown-item>
          <el-dropdown-item command="enable">启用</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>


    <!-- 数据列表 -->
    <el-row>
      <el-col :span="4">
        <el-tree :data="data" :load="loadNode" :props="defaultProps" class="dept" lazy
                 @node-click="queryByDept"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData" border stripe style="width: 100%" @selection-change="selectchg">
          <el-table-column type="expand">
            <template v-slot="props">
              <el-form class="demo-table-expand" inline label-position="left">
                <el-form-item label="账号">
                  <span>{{ props.row.account }}</span>
                </el-form-item>
                <el-form-item label="职业">
                  <span>{{ props.row.job }}</span>
                </el-form-item>
                <el-form-item label="姓名">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所在部门">
                  <span>{{ props.row.dept_name }}</span>
                </el-form-item>
                <el-form-item label="手机号">
                  <span>{{ props.row.mobile }}</span>
                </el-form-item>
                <el-form-item label="创建日期">
                  <span>{{ props.row.create_date }}</span>
                </el-form-item>
                <el-form-item label="邮箱">
                  <span>{{ props.row.email }}</span>
                </el-form-item>
                <el-form-item label="更新日期">
                  <span>{{ props.row.update_date }}</span>
                </el-form-item>
                <el-form-item label="状态">
                  <el-tag v-if="props.row.status === 1">正常</el-tag>
                  <el-tag v-else type="info">禁用</el-tag>
                </el-form-item>
                <el-form-item></el-form-item>
                <el-form-item label="备注">
                  <span>{{ props.row.note }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" type="selection" width="60"/>
          <el-table-column align="center" header-align="center" label="序号" type="index" width="60"/>
          <el-table-column header-align="center" label="账号" prop="account"/>
          <el-table-column header-align="center" label="姓名" prop="name"/>
          <el-table-column align="center" header-align="center" label="邮箱" prop="email" width="160"/>
          <el-table-column align="center" header-align="center" label="手机号" prop="mobile" width="130"/>
          <el-table-column align="center" header-align="center" label="所在部门" prop="dept_name" width="130"/>
          <el-table-column align="center" header-align="center" label="状态" width="80">
            <template v-slot="scope">
              <el-tag v-if="scope.row.status === 1">正常</el-tag>
              <el-tag v-else type="info">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="操作" width="200">
            <template v-slot="scope">
              <el-button icon="el-icon-edit" size="mini" title="修改" type="primary" @click="saveOrUpdate(scope.row)"/>
              <el-button icon="el-icon-delete" size="mini" title="删除" type="danger" @click="del(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="text-align: right;margin-top: 20px">
          <el-pagination
            :page-size="pageSize"
            :page-sizes="[5,10,15,20,30]"
            :total="total"
            background
            layout="total, sizes, prev, pager, next"
            style="margin-right: 30px"
            @current-change="pageChange"
            @size-change="sizeChange">
          </el-pagination>
        </div>

      </el-col>
    </el-row>

    <!-- 保存修改 -->
    <save-or-update ref="saveOrUpdate" :visible.sync="isshow" @refreshData="initData"></save-or-update>
  </div>
</template>

<script>
// 导入编辑组件
const SaveOrUpdate = () => import("@/views/sys/user/SaveOrUpdate")
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'isLeaf'
      },
      filter: {
        account: "",
        name: "",
        mobile: ""
      },
      sels: [], //代表选择多个
      tableData: [], // 数据
      user: {},//登录用户信息
      isshow: false, // 是否显示编辑框
      pageNum: 1,     // 默认显示第一页
      pageSize: 10,   // 每页显示的数据条数
      total: 0,        // 总记录数
      deptno: "" // 当前部门编号为空
    }
  },
  created() {
    this.user = this.$session.getUser()
    this.initData()
  },
  components: {
    SaveOrUpdate
  },
  methods: {
    queryByDept(data) {
      this.deptno = data.deptno
      this.initData()
    },

    loadNode(node, resolve) {
      let pid = node.data.id
      let params = {
        "pid": pid,
        "euid": this.user.euid
      }
      this.$api.queryTree(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            resolve(res.data)
          }
        })
    },
    selectchg(sel) {
      this.sels = sel;
    },
    // 批量操作
    batch(command) {
      if (this.sels.length === 0) {
        this.$message({
          message: '请选择要批量操作的数据',
          type: 'warning'
        });
        return
      }
      // 判断 提示用户是否批量删除
      if (command === "del") {
        this.$confirm('您确认要批量删除吗？，是否继续?', '提示', {
          confirmButtonText: ' 确定',
          cancelButtonText: '取消',
          type: ' warning '
        }).then(() => {
          this.executeBatch(command)
        }).catch(() => {})
      } else {
        this.executeBatch(command)
      }
    },
    // 执行批量操作
    executeBatch(command) {
      //获取要操作的数据id
      let ids = [];
      this.sels.forEach(user => {
        ids.push(user.id);
      })
      this.$api.batchUser({command, ids})
        .then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          // 刷新数据
          this.initData()
        })
    },
    // 重置查询框内的数据
    reset() {
      this.filter = {
        account: "",
        name: "",
        mobile: ""
      }
      this.pageNum = 1
      this.initData()
    },
    // 模糊查询
    queryLike() {
      this.pageNum = 1
      this.initData()
    },
    // 删除用户
    del(id) {
      this.$confirm('您确认要删除此条用户数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteUser({id})
          .then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
            this.initData()
          })
      }).catch(() => {
      });
    },
    // 新增或者修改
    saveOrUpdate(data) {
      this.isshow = true
      this.$refs.saveOrUpdate.init(data)
    },
    // 更改每一页的记录数
    sizeChange(size) {
      this.pageSize = size
      this.pageNum = 1
      this.initData()
    },
    // 页面分页
    pageChange(page) {
      this.pageNum = page
      this.initData()
    },
    // 查询数据
    initData() {
      let params = {
        "pageNum": this.pageNum,
        "pageSize": this.pageSize,
        "account": this.filter.account,
        "name": this.filter.name,
        "mobile": this.filter.mobile,
        "euid": this.user.euid,
        "deptno": this.deptno
      }
      this.$api.queryUser(params)
        .then(res => {
          // 判断接口数据是否正常
          if (res.code === 200) {
            this.tableData = res.data.list
            this.pageNum = res.data.pageNum
            this.pageSize = res.data.pageSize
            this.total = res.data.total
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.search_ipt {
  width: 200px;
  margin-left: 5px;
}

.toolbar {
  height: 50px;
  line-height: 50px;
  margin-top: 5px;
}

.toolbar span {
  margin-left: 20px;
}

.dept {
  border: #ccc solid 1px;
  margin: 0 2px;
  border-radius: 2px;
}
</style>
